<template>
  <q-btn
    flat
    square
    unelevated
    padding="0"
    :ripple="false"
    @click="onClickFunction"
    :to="routerTo"
  >
    <div class="username-button-content">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="190"
        height="48"
        fill="none"
        viewBox="0 0 190 48"
        v-if="!mini"
      >
        <path
          :fill="color.innerColor"
          fill-opacity=".9"
          fill-rule="evenodd"
          d="m1.98 32.815 13.034 13.189H185.52l2.5-2.522V37.06l-2.136-2.444v-14.1l2.136-2.444V15.2L175.084 2.004 4.479 2.01l-2.5 2.522v6.877l2.136 2.445v14.1L1.98 30.397v2.417Z"
          clip-rule="evenodd"
        />
        <path
          :fill="color.outerColor"
          fill-opacity=".9"
          fill-rule="evenodd"
          d="m0 33.664 14.195 14.344h172.169L190 44.332V14.298L175.851 0 3.636.007 0 3.682v29.982Zm1.938-.831 13.04 13.216h170.583l2.501-2.528v-6.434l-2.137-2.45V20.51l2.137-2.45v-2.877L175.119 1.96l-170.68.007-2.5 2.527v6.891l2.136 2.45v14.128l-2.137 2.45v2.42Z"
          clip-rule="evenodd"
        />
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        fill="none"
        viewBox="0 0 48 48"
        v-else
      >
        <path
          :fill="color.outerColor"
          fill-rule="evenodd"
          d="M0 33.659 14.344 48h29.982L48 44.324v-30.03L33.7 0 3.674.009 0 3.682V33.66Z"
          clip-rule="evenodd"
        />
        <path
          :fill="color.innerColor"
          fill-opacity=".9"
          fill-rule="evenodd"
          d="m1.959 32.828 13.224 13.221h28.29L46 43.523V37.09l-2.16-2.45V20.516l2.16-2.45V15.19L32.776 1.969H4.486L1.959 4.493v6.89l2.159 2.448v14.126l-2.16 2.449v2.421Z"
          clip-rule="evenodd"
        />
      </svg>

      <div class="absolute-full flex flex-center mybutton no-wrap">
        <div v-if="!mini" class="username-button-text">{{ username }}</div>
        <q-avatar square text-color="white" :icon="icon" />
      </div>
    </div>
    <q-tooltip>
      {{ item.tooltip }}
    </q-tooltip>
  </q-btn>
</template>

<script>
export default {
  name: "UsernameButton",
  props: {
    item: {
      type: Object,
      default: () => {
        return {
          name: "Usanto-Nomo",
          icon: "userIcon.svg",
          tooltip: "Usanto-Nomo",
          action: "",
        };
      },
    },
    color: {
      type: Object,
      default: () => {
        return {
          innerColor: "#8282BF",
          outerColor: "#4A4AFF",
          color: "blue",
        };
      },
    },
    mini: {
      type: Boolean,
      default: false,
    },
  },
  setup() {
    return {};
  },
  computed: {
    username() {
      if (typeof this.item.name === "string") {
        if (this.item.name.length > 15) {
          return this.item.name.slice(0, 12) + "..";
        }
        return this.item.name;
      }
      return "???";
    },
    routerTo() {
      if (this.item.action) {
        if (typeof this.item.action === "string") {
          return this.item.action;
        }
      }
      return "";
    },
    onClickFunction() {
      if (this.item.action) {
        if (typeof this.item.action === "function") {
          return this.item.action;
        }
      }
      return "";
    },
    icon() {
      if (this.item.icon) {
        const arr = this.item.icon.split(".");
        if (arr.length === 1) {
          return this.item.icon;
        }
        if (arr.length > 1) {
          return "img:" + this.item.icon;
        }
      }
      return null;
    },
  },
};
</script>
<style scoped>
.username-button-content {
  display: grid;
}
.username-button-content > svg,
.username-button-content > div {
  grid-area: 1/-1;
}
.username-button-content > div {
  padding-left: 10px;
  padding-right: 10px;
}

.username-button-text {
  margin: auto;
  font-weight: 700;
  font-size: 14px;
}
svg * {
  transition: all 1s;
}
</style>
